<!--内部验收证书-->
<template>
  <div ref="reportModal" class="reportModal">
    <div class="form-box">
      <div style="display: flex;margin-bottom: 5px;">
        <div class="form-label" style="padding-top: 5px">已完成工作量</div>
        <el-input
          v-model="dataObject.completeContent"
          maxlength="512"
          size="mini"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
        />
      </div>
      <div style="display: flex;margin-bottom: 5px;align-items: center">
        <div class="form-label">投入试运行的准备情况</div>
        <el-input
          v-model="dataObject.preparationSituation"
          maxlength="512"
          size="mini"
          class="pms-wz-input el-table-inline"
          placeholder="请输入"
        />
      </div>
      <div style="display: flex;margin-bottom: 5px;align-items: center">
        <div class="form-label">对遗留问题的处理意见</div>
        <el-input
          v-model="dataObject.handleOpinions"
          maxlength="512"
          size="mini"
          class="pms-wz-input el-table-inline"
          placeholder="请输入"
        />
      </div>
      <div style="display: flex;align-items: center">
        <div class="form-label">竣工验收结论</div>
        <el-input
          v-model="dataObject.tanYsjl"
          maxlength="64"
          size="mini"
          class="pms-wz-input el-table-inline"
          placeholder="请输入"
        />
      </div>
    </div>
    <div style="padding: 20px 0 5px;color: #333333">
      服务商列表
    </div>
    <el-table
      :data="serviceList"
      tooltip-effect="dark"
      style="width: 100%"
      border
    >
      <el-table-column v-if="manageMode === '03'" prop="prjCode" label="单项工程编码" align="center" />
      <el-table-column prop="org" label="合同服务商类型" align="center" />
      <el-table-column prop="supplierName" label="合同服务商名称" align="center" />
      <el-table-column prop="contractCode" label="合同编号" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.supplierName === '无'">无</span>
          <el-input v-else v-model="scope.row.contractCode" maxlength="512" size="mini" placeholder="请输入" class="pms-wz-input el-table-inline" />
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 20px 0 5px;color: #333333">
      站址列表
    </div>
    <el-table
      :data="siteList"
      tooltip-effect="dark"
      style="width: 100%"
      border
    >
      <el-table-column align="center" prop="serialNumber" label="序号" width="50" />
      <el-table-column prop="siteName" label="站点名称" align="center" show-overflow-tooltip />
      <el-table-column prop="siteCode" label="站点编码" align="center" show-overflow-tooltip />
      <el-table-column prop="lxtzje" label="立项可研投资(元)" align="center" width="120" />
      <el-table-column prop="xmsjje" label="项目设计投资(元)" align="center" width="120" />
      <el-table-column prop="xmzgje" label="项目转固投资(元)" align="center" width="120" />
      <el-table-column prop="remarks" label="备注" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.remarks==='无'">无</span>
          <el-input v-else v-model="scope.row.remarks" maxlength="512" size="mini" placeholder="请输入" class="pms-wz-input el-table-inline" />
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;text-align: center;">
      <TButton :btn-config="footerBtn" @propClick="handleClick" />
    </div>
  </div>
</template>

<script>
import { msgInfoEl } from '@/utils'
import { queryElectronInfo, updateAccElectron } from '@/api/attachmentInfo'
import TButton from '@/components/basic/TButton.vue'
import { getPrjDetailApi } from '@/api/acceptance'

export default {
    name: 'ReportModal',
    components: {
        TButton
    },
    props: {
        prjParams: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            dataObject: {}, // form表单数据
            serviceList: [],
            siteList: [],
            footerBtn: [
                {
                    label: '确认',
                    fun: 'confirm'
                }
                // {
                //     label: '取消',
                //     fun: 'cancel'
                // },
            ],
            manageMode: ''
        }
    },
    async created() {
        await this.getPrjDetail(this.prjParams.prjId)
        await this.getElectronInfo()
    },
    mounted() {
        this.$nextTick(() => {
          window.parent.postMessage({ height: this.$refs.reportModal.clientHeight + 10, type: 'electronDocHeight' }, this.$fixIframeArr())
        })
    },
    methods: {
        async getPrjDetail(id) {
            const res = await getPrjDetailApi(id)
            this.manageMode = res.data.manageMode
        },
        // 查询
        async getElectronInfo() {
            const params = {
                prjId: this.prjParams.prjId,
                docType: this.prjParams.docType,
                prjType: this.prjParams.prjType
            }
            await queryElectronInfo(params).then(res => {
                if (+res.code !== 200) {
                  return Promise.reject(res)
                }
                this.dataObject = res.data
                this.serviceList = JSON.parse(res.data.contracts)
                this.siteList = JSON.parse(res.data.projectOverview)
                this.$nextTick(() => {
                    console.log('height', this.$refs.reportModal.clientHeight)
                    window.parent.postMessage({ height: this.$refs.reportModal.clientHeight + 10, type: 'electronDocHeight' }, this.$fixIframeArr())
                })
            })
        },
        handleClick(fn) {
            this[fn]()
        },
        confirm() {
            const parmas = {
                ...this.dataObject,
                contracts: JSON.stringify(this.serviceList),
                projectOverview: JSON.stringify(this.siteList),
                prjId: this.prjParams.prjId,
                prjType: this.prjParams.prjType,
                nodeId: this.prjParams.nodeId
            }
            console.log(22222, parmas)
            updateAccElectron(parmas).then((res) => {
                if (+res.code !== 200) {
                  return Promise.reject(res)
                }
                msgInfoEl({
                    type: 'success',
                    message: `保存成功！`
                }, 2000)
            })
        }
       /* cancel(){
            console.log('取消')
        }*/
    }
}
</script>

<style scoped lang="scss">
.reportModal {
    .form-box {
        padding: 10px;
        border: 1px solid #DCDFE6;
    }
    .form-label{
        color: #606266;
        width: 160px;
        text-align: right;
        padding-right: 12px;
    }
    .el-form-item {
        width: 100%;

        ::v-deep.el-form-item__content {
            margin-left: 0px !important;
        }
    }
    ::v-deep .el-input__inner {
        font-size: 12px !important;
        padding-left: 6px;
        box-sizing: border-box;
        height: 24px !important;
    }
    ::v-deep .el-textarea__inner{
        padding: 5px !important;
        background-color: #fffaee !important;
        border: none !important;
    }

}
</style>
